<template>
    <div class="my">
        <div class="first">
            <p style="text-align: center;color: #fff;font-size: 26px;">我的信息</p>
            <div class="card">
                <div class="avatar">
                    <img src="@/assets/touxiang.jpg" />
                </div>
                <div class="nickname">{{ username }}</div>
                <div class="address">
                    <van-cell title="地址" icon="location-o" />
                </div>
            </div>
        </div>
        <div class="content">
            <van-cell title="完善信息" is-link />
            <van-cell title="查看记录" is-link />
            <van-cell title="意见反馈" is-link />

            <van-cell @click="Login" title="退出登录"></van-cell>

        </div>
    </div>
</template>

<script>
import { getCurrentInstance, reactive, toRefs } from 'vue';
import Login from './Login.vue';


export default {
    setup() {
        const { proxy } = getCurrentInstance()
        const state = reactive({
            username: 'default'
        })
        state.username = localStorage.getItem('user')
        return {
            ...toRefs(state)
        };
    },

    methods: {
        Login() {
            localStorage.removeItem('isLogin');
            this.$router.push('./login')
        }
    }
}
</script>

<style scoped>
.first {
    width: 100%;
    height: 10.75rem;
    background-color: rgb(183, 165, 248);
    position: relative;
    display: flex;
    justify-content: center;
}

.card {
    width: 80%;
    height: 10.625rem;
    border-radius: 0.625rem;
    background-color: #fff;
    position: absolute;
    bottom: -30px;
    box-shadow: 10px 10px 21px rgb(0 0 0 / 40%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.avatar {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
}

.avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.nickname {
    color: rgb(204, 202, 202);
    margin-top: 10px;
}

.van-cell {
    color: rgb(204, 202, 202);
}

.content {
    margin-top: 5rem;
}
</style>